<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="客户列表"
        highlight-current-row
        :columns="columns"
        :request-api="getCustomList"
        :init-param="Object.assign(initParams)"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="openDrawerAddCustom()">新增客户</el-button>
          <el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加客户</el-button>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出客户数据</el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="View" @click="openDrawerShow('查看', scope.row)">查看</el-button>
          <el-button type="primary" link :icon="EditPen" @click="openDrawerCustom('编辑', scope.row)">编辑</el-button>
          <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
        </template>
      </ProTable>
      <CustomDrawer ref="drawerRefCustom" />
      <ShowDrawer ref="drawerRefShow" />
      <AddDrawer ref="drawerRefAdd" />
      <ImportExcel ref="dialogRef" />
    </div>
  </div>
</template>
<script setup lang="ts" name="useSelectFilter">
import { ref, onMounted } from "vue";
import { Custom } from "@/api/interface";
import { ElMessageBox } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import CustomDrawer from "./components/CustomDrawer.vue";
import ShowDrawer from "./components/ShowDrawer.vue";
import AddDrawer from "./components/AddDrawer.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, Download, Upload, View } from "@element-plus/icons-vue";
import { BatchAddCustom, addCustom, deleteCustom, editCustom, exportCustomInfo, getCustomList } from "@/api/modules/custom";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "customerId", label: "客户id", width: 120, sortable: true },
  { prop: "customerName", label: "客户名", width: 120, search: { el: "input" } },
  { prop: "flatsName", label: "单位名称", width: 120 },
  { prop: "customerIdentity", label: "客户身份证号", width: 200, search: { el: "input" } },
  { prop: "customerPhone", label: "客户电话", width: 120, search: { el: "input" } },
  { prop: "receiverAddress.province", label: "省" },
  { prop: "receiverAddress.city", label: "市" },
  { prop: "receiverAddress.zone", label: "区" },
  { prop: "receiverAddress.detail", label: "详细地址", width: 120 },
  { prop: "customerLandline", label: "座机号" },
  { prop: "operation", label: "操作", width: 330, fixed: "right" }
];

// 获取用户角色字典
onMounted(() => {});

const initParams = ref({ role: 11 });

// 导出客户列表
const downloadFile = async () => {
  ElMessageBox.confirm("确认导出客户数据?", "温馨提示", { type: "warning" }).then(() =>
    useDownload(exportCustomInfo, "用户列表", proTable.value?.searchParam)
  );
};

// 批量添加用户
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
const batchAdd = () => {
  const params = {
    title: "客户",
    tempApi: exportCustomInfo,
    importApi: BatchAddCustom,
    getTableList: proTable.value?.getTableList
  };
  dialogRef.value?.acceptParams(params);
};

const drawerRefCustom = ref<InstanceType<typeof CustomDrawer> | null>(null);
const openDrawerCustom = (title: string, row: Partial<Custom.ResCustomList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "编辑" ? editCustom : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRefCustom.value?.acceptParams(params);
};

const drawerRefShow = ref<InstanceType<typeof ShowDrawer> | null>(null);
const openDrawerShow = (title: string, row: Partial<Custom.ResCustomList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRefShow.value?.acceptParams(params);
};

const drawerRefAdd = ref<InstanceType<typeof AddDrawer> | null>(null);
const openDrawerAddCustom = () => {
  const params = {
    api: addCustom,
    getTableList: proTable.value?.getTableList
  };
  drawerRefAdd.value?.acceptParams(params);
};

// 删除用户信息
const deleteAccount = async (params: Custom.ResCustomList) => {
  await useHandleData(deleteCustom, { customerId: params.customerId }, `删除【${params.customerName}】客户`);
  proTable.value?.getTableList();
};
</script>
